import Vue from 'vue'
import Vuex from 'vuex'
import { loginApi } from '../api'
// 为什么使用vUex实现登陆功能
// 正常的企业开发场景会将登陆获取用户信息等功能放在vuex的actions中进行调用
// token多处多次使用是一个公共的状态vuex更适合公共状态管理
// 由于vuex不能实现刷新保存所以还需要将token数据存放在本地一份(localSorage,cookie)
// Vuex实现登陆并保存token的步骤
// 1、在vuex中的state里定义变量
// 2、在mutations中定义修改state数据的方法
// 3、需要在vue×中引入接口（登陆接口）
// 4、在act1ons由实现接☐的调用同时调用vuex中的mtat1os中的方法实现将
// ~接口的返回值存放在vuex的state中
// 5、在需要调用登陆接回的文件中通过mapActions或者this.$store.dispatch(’asyncLoginAction','传入的接口所需参数

// 本地存储包括面试题localstorage sessionStorage Cookie indexDB
// 他们的共同点都是用来在浏览器中存储数据存到硬盘vux存到内存
// 他们都只能存放字符串如果想要存放对象通过JS0N.stringify进行转换
// localStorage将数据存放在本地可以跨页面访问5M
// sessionStorage临时会话存储如果当前页面关闭存储清空如果同一个网站开了多个标签页可以跨标签页面访问5M
// Cookie浏览器存储的一种cookie大小之后4k左右（不同浏览器cookie的大小也不同）
// cookie会随着请求一起发送到后端里面通常存放用户信息用户配置用户token
Vue.use(Vuex)
// vuex+本地存保证数据持久化
export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || '',
    refresh_token: localStorage.getItem('refresh_token') || '',
    user: JSON.parse(localStorage.getItem('user')) || {}// 存储用户头像
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    setRefreshToken (state, refresh_token) {
      state.refresh_token = refresh_token
      localStorage.setItem('refresh_token', refresh_token)
    },
    setUser (state, user) {
      state.user = user
      localStorage.setItem('user', JSON.stringify(user))
    }
  },
  actions: {
    async asyncLoginAction (store, val) {
      try {
        const res = await loginApi(val)
        const { refresh_token, token } = res.data.data
        store.commit('setToken', token)
        store.commit('setRefreshToken', refresh_token)
        return Promise.resolve(res)
      } catch (err) {
        return Promise.reject(err)
      }
    }
  },
  modules: {
  }
})
